<template>
  <div class="page-content page-content-flag">
    <div class="epidemic-banner" @click="goKnow('https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_pc_3')">
        <img src="/img/epimedic/banner.png"/>
    </div>
    <div class="epidemic-prompt"><img src="/img/epimedic/tishi.png"><p>温馨提示：积极防护，保护自己。戴口罩，勤洗手，室内通风！众志成城，抗击疫情！</p></div>
    <div class="epidemic-info">
        <div class="epidemic-item" @click="goKnow('https://baike.baidu.com/medicine/disease/%E6%96%B0%E5%9E%8B%E5%86%A0%E7%8A%B6%E7%97%85%E6%AF%92%E6%84%9F%E6%9F%93%E7%9A%84%E8%82%BA%E7%82%8E/24282048?tab=%E6%A6%82%E8%BF%B0')">
            <img src="/img/epimedic/small-banner1.png">
        </div>
        <div class="epidemic-item" @click="goKnow('http://tv.cctv.com/live/cctv13/?spm=C28340.P9dhkRStLqPh.ELArxWiLc9gN.2')">
            <img src="/img/epimedic/small-banner2.png">
        </div>
        <div class="epidemic-item" @click="goKnow('http://news.cctv.com/')">
            <img src="/img/epimedic/small-banner3.png">
        </div>
    </div>
    <div class="epidemic-newsz">
        <div class="epidemic-news">
            <div style="display:inline-block;width:100%">
                <div class="news-left">
                    <div class="news-title">国科精品课程免费开放</div>
                    <no-ssr>
                        <el-carousel trigger="click" indicator-position="none" loop arrow="never" class="course-free">
                            <el-carousel-item v-for="(item,index) in dynamicList" :key="index">
                                <img :src="data" v-for="(data,datax) in item.imgs" :key="datax" class="lunbopic" @click="goKnow('http://campus.goktech.cn/allCourse?product=0&type=5')">
                            </el-carousel-item>
                        </el-carousel>
                    </no-ssr>
                </div>
                <div class="news-right">
                    <div class="news-title">各地要闻</div>
                    <div class="various-place">
                        <div class="place-item" @click="goKnow('http://www.xm.gov.cn/xmyw/')">
                            <img src="/img/epimedic/xia.png">
                        </div>
                        <div class="place-item" @click="goKnow('http://www.quanzhou.gov.cn/zfb/xxgk/zfxxgkzl/qzdt/qzyw/')">
                            <img src="/img/epimedic/quan.png">
                        </div>
                        <div class="place-item" @click="goKnow('http://www.fuzhou.gov.cn/gzdt/rcyw/')">
                            <img src="/img/epimedic/fu.png">
                        </div>
                        <div class="place-item" @click="goKnow('http://www.longyan.gov.cn/xw/yw2/')">
                            <img src="/img/epimedic/long.png">
                        </div>
                        <div class="place-item" @click="goKnow('http://www.chengdu.gov.cn/chengdu/home/xw.shtml')">
                            <img src="/img/epimedic/cheng.png">
                        </div>
                        <div class="place-item" @click="goKnow('http://www.zhangzhou.gov.cn/cms/html/zzsrmzf/zzyw/index.html')">
                            <img src="/img/epimedic/zhang.png">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import dom from '@/api/dom'
export default {
    layout: 'rest',
    head () {
    return {
      title: '疫情防控',
      meta: [
        { hid: 'baidu-site-verification', name: 'baidu-site-verification', content:'T7mU7Yw8NB' },
        { hid: 'keywords', name: 'keywords', content: '国科学院，在线教育，IT人才培养，IT培训，软件开发培训，编程培训，软件工程师培训班，成都IT培训机构，程序员培训机构' },
        { hid: 'description', name: 'description', content: '国科科技业务涉及校企产教融合合作运营，校企联合IT人才培 养服务，智慧校园建设与运营。专注于对IT产业知识的理解和把握，定位产教融合人才解决方案提供者和服务者的角色，积极整合地方高校与IT产业链多环节资源，合作高校服务于产业，为高校和企业客户 提供优质的人才服务和项目服务。' }
      ]
    }
  },
  data() {
    return{
      dynamicList:[
          {imgs:['/img/epimedic/swipe1.png',
          '/img/epimedic/swipe2.png',
          '/img/epimedic/swipe3.png',
          '/img/epimedic/swipe4.png',
          '/img/epimedic/swipe5.png',]},
          {imgs:['/img/epimedic/swipe6.png',
          '/img/epimedic/swipe7.png',
          '/img/epimedic/swipe8.png',
          '/img/epimedic/swipe9.png',
          '/img/epimedic/swipe10.png',]},
          {imgs:['/img/epimedic/swipe1.png',
          '/img/epimedic/swipe2.png',
          '/img/epimedic/swipe3.png',
          '/img/epimedic/swipe4.png',
          '/img/epimedic/swipe5.png',]},
          {imgs:['/img/epimedic/swipe6.png',
          '/img/epimedic/swipe7.png',
          '/img/epimedic/swipe8.png',
          '/img/epimedic/swipe9.png',
          '/img/epimedic/swipe10.png',]}
      ],
    }
  },
  created(){
   
  },
  mounted(){
    document.querySelector('.page-content').style.minHeight = dom.getHeight()
  },
  methods: {
    goKnow(val)
    {
        window.open(val,'_blank')
    }
  }
}
</script>

<style lang="stylus" scoped>
.epidemic-banner
{
    width: 1200px;
    height: 112px;
    cursor: pointer;
    margin: 88px auto 30px;
    position: relative;
    overflow: hidden;
    &:hover
    {
        transition: all 0.2s linear;
        background:linear-gradient(135deg,rgba(231,237,245,1) 0%,rgba(220,226,234,1) 100%);
        box-shadow:0px 10px 30px 0px rgba(0,0,0,0.2);
    }
    img 
    {
        position: absolute;
        height: 100%;
        left: -9999px;
        right: -9999px;
        top: -9999px;
        bottom: -9999px;
        margin: auto;
    }
}
.epidemic-info
{
    width:1200px;
    margin:30px auto 0;
    display:flex;
    justify-content:space-between;
    padding-bottom:30px
    .epidemic-item
    {
        width:392px;
        height:76px;
        cursor:pointer;
        img 
        {
            width:100%;
            height:100%;
            &:hover
            {
                transition: all 0.2s linear;
                background:linear-gradient(360deg,rgba(243,246,248,1) 0%,rgba(230,238,243,1) 100%);
                box-shadow:0px 10px 30px 0px rgba(0,0,0,0.2);
            }
        }
    }
}
.epidemic-prompt
{
    width:1200px;
    height:54px;
    background:rgba(249,247,247,1);
    border:1px solid rgba(230,201,208,1);   
    margin:0 auto;
    display:flex;
    align-items:center
    img 
    {
        width:18px;
        height:18px;
        margin-right:10px;
        margin-left: 20px;
    }
    p
    {
        font-size:14px;
        font-family:SourceHanSansCN-Regular,SourceHanSansCN;
        font-weight:400;
        color:rgba(164,96,113,1);
    }
}
.epidemic-newsz
{
    width: 100%;
    background: rgba(245,245,245,1);
    padding-top: 30px;
    border-top:1px solid #EEEEEE;
    padding-bottom: 60px;
}
.epidemic-news
{
    width:1200px;
    margin:0 auto;
    .news-left
    {
        width:1200px;
        margin-right:34px
        .course-free
        {
            overflow:hidden;
            margin-top:16px
            /deep/ .el-carousel__item.is-animating
            {
                display:flex
            }
            img 
            {
                width:230px;
                height:262px;
                cursor: pointer;
                margin-right:12px
                &:hover
                {
                    transition: all 0.2s linear;
                    background:linear-gradient(360deg,rgba(243,246,248,1) 0%,rgba(230,238,243,1) 100%);
                    box-shadow:0px 10px 30px 0px rgba(0,0,0,0.2);
                }
            }
        }
    }
    .news-right
    {
        margin-top:-8px
        .various-place
        {
            margin-top: 16px;
            .place-item
            {
                width: 190px;
                height: 58px;
                background: #f77b7b;
                float: left;
                cursor:pointer;
                margin-right:12px
                &:last-child
                {
                    margin-right:0
                }
                img 
                {
                    width:100%;
                    height:100%;
                    cursor:pointer
                    &:hover
                    {
                        transition: all 0.2s linear;
                        background:linear-gradient(360deg,rgba(243,246,248,1) 0%,rgba(230,238,243,1) 100%);
                        box-shadow:0px 10px 30px 0px rgba(0,0,0,0.2);
                    }
                }
            }
        }
    }
    .news-title
    {
        font-size:16px;
        font-family:Source Han Sans CN;
        font-weight:bold;
        color:rgba(30,30,30,1);
        display:flex;
        align-items:center
    }
}
</style>
